<template>
    <div class="login-container">
      <div class="login-weaper">
        <div class="login-left animate__animated animate__fadeInLeft">
          <img class="img"
               src="/img/背景图.png"
               alt="">
          <p class="title">{{ $t('login.info') }}</p>
        </div>
        <div class="login-border animate__animated animate__fadeInRight">
          <div class="register-main">
            <p class="login-title">
              用户注册
            </p>
            <el-form
                ref="registerFormRef"
                :model="registerForm"
                :rules="registerRules"
                label-position="right"
                label-width="80px">
              <el-form-item label="手机号" prop="userId">
                <el-input
                    v-model="registerForm.userId"
                    placeholder="请输入手机号" size="large"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="checkCode">
                <el-input
                    v-model="registerForm.checkCode"
                    placeholder="请输入验证码"
                    autocomplete="off"
                    size="large"
                >
                  <template #append>
                    <el-button @click="getCode">获取验证码</el-button>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="密码" prop="userPassword">
                <el-input
                    v-model="registerForm.userPassword"
                    type="password"
                    autocomplete="off"
                    placeholder="设置登录密码"
                    size="large"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPassword">
                <el-input
                    v-model="registerForm.checkPassword"
                    type="password"
                    autocomplete="off"
                    placeholder="在再次确认密码"
                    size="large"
                ></el-input>
              </el-form-item>
              <div>
                <el-link href="/login"
                         :underline="false"
                         style="margin-left: 310px;"
                         >已有账号？点击登录</el-link>
              </div>
              <el-form-item>
                <el-button type="primary" class="login-submit" @click="userRegister">注册</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

</template>
<script setup>
import { ElMessage } from 'element-plus'
import {ref , getCurrentInstance} from "vue";
import {getCodeApi, registerApi} from '../../api/login';
const {proxy} = getCurrentInstance();

const registerFormRef=ref(null)
const registerForm = ref({
  userId: '',
  checkCode: '',
  userPassword: '',
  checkPassword: '',
})

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else {
    if (registerForm.value.userPassword !== '') {
      if (!registerFormRef.value) return
      registerFormRef.value.validateField('checkPassword', () => null)
    }
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== registerForm.value.userPassword) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
};

const registerRules = ref({
  userId:[
    {
      required: true,
      message: '请输入手机号码',
      trigger: 'blur',
    },
    {
      pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }
  ],
  checkCode: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    }
  ],
  userPassword: [{ validator: validatePass, trigger: 'blur' ,required: true}],
  checkPassword: [{ validator: validatePass2, trigger: 'blur' ,required: true}],
})

const getCode = () =>{
  getCodeApi(registerForm.value.userId).then(res=> {
    if(res.data.responseSuccess){
      ElMessage.success("发送成功！");
    }
  })
}

const userRegister = () => {
  registerFormRef.value.validate(valid => {
    if (valid) {
      registerForm.value.userPassword = proxy.$md5(registerForm.value.userPassword)
      registerApi(registerForm.value)
     .then(res => {
       let data = res.data.result
        if(data === 'timeOut') {
          ElMessage.error("验证码已过期，请重新获取")
          registerFormRef.value.resetFields()
        }else if(data === "codeError"){
          ElMessage.error("验证码错误")
          registerFormRef.value.resetFields()
        }else if(data === "exist"){
          ElMessage.error("该用户已存在！")
          registerFormRef.value.resetFields()
        }else if(res.data.errorMsg === "databaseError"){
          ElMessage.error("数据库错误，请重试！")
          registerFormRef.value.resetFields()
        } else if(res.data.responseSuccess){
          ElMessage.success("注册成功！即将返回登录页！")
          setInterval(function (){
            proxy.$router.push("/login")
          },3000)
        }
      })
    }
})
}

</script>
